import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
} from "react";
import PropType from 'prop-types'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import gsap from 'gsap'; //动画库
import Stats from 'stats.js'; //性能监控
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'; // FBX 模型加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; //模型加载器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; //模型解压缩

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'; //模型加载器


const   scene = new THREE.Scene();

const  renderer = new THREE.WebGLRenderer( { antialias: true } );

const  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
 new OrbitControls( camera, renderer.domElement );
const loader = new GLTFLoader()
const ReactDemo=()=>{

  init();
  animate();

  function init() {
  
    const container = document.createElement( 'div' );
    document.body.appendChild( container );

   
    camera.position.set( - 1.8, 0.6, 2.7 ); // 相机初始化的位置

  

    new RGBELoader().load( './san_giuseppe_bridge_2k.hdr', function ( texture ) {

						texture.mapping = THREE.EquirectangularReflectionMapping; //用于等距圆柱投影的环境贴图，也被叫做经纬线映射贴图

						scene.background = texture; // 场景背景贴图
						scene.environment = texture; //若该值不为null，则该纹理贴图将会被设为场景中所有物理材质的环境贴图

					

						// model 

					
						loader.load( './DamagedHelmet/glTF/DamagedHelmet.gltf', function ( gltf ) {

							scene.add( gltf.scene );

					

						} );

					} );


         
          renderer.setPixelRatio( window.devicePixelRatio ); //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
          renderer.setSize( window.innerWidth, window.innerHeight ); // canvas 大小设置
          renderer.toneMapping = THREE.ACESFilmicToneMapping; //这些常量定义了WebGLRenderer中toneMapping的属性。 这个属性用于在普通计算机显示器或者移动设备屏幕等低动态范围介质上，模拟、逼近高动态范围（HDR）效果。
          renderer.toneMappingExposure = 1; //色调映射的曝光级别。默认是1
          renderer.outputEncoding = THREE.sRGBEncoding; //定义渲染器的输出编码
          container.appendChild( renderer.domElement ); // 把canvas 添加到 到div 中
  
         
     
    window.addEventListener( 'resize', onWindowResize );//窗口发生改变 触发

  }

  function onWindowResize() {
   

    camera.aspect = window.innerWidth / window.innerHeight; //摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）。
    camera.updateProjectionMatrix(); //更新摄像机投影矩阵。在任何参数被改变以后必须被调用。

    renderer.setSize( window.innerWidth, window.innerHeight );

  }

  //

  function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

 

  }
  return (<>
   
    
  
  </>)
}

export default ReactDemo;
